<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <link href="css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <h2 style="padding-left:60px;">Fancy Rates Test</h2>
    <script src="lib/d3.js"></script>
    <script src="lib/jquery.js"></script>
    <script src="lib/bootstrap.js"></script>
    <script src="lib/fancy-rate.js"></script>
    
    <div id="elem" data-plugin-options='{"tabledata": [{"quarter":"2008-Q1", "ANGEL" : 339, "SERIES-A" : 345, "SERIES-B" : 186}, {"quarter":"2008-Q2", "ANGEL" : 340, "SERIES-A" : 126, "SERIES-B" : 253}  ], "defaultcolors" : ["#d9534f", "#f0ad4e", "#5cb85c"], "canvaswidth" : 300, "canvasheight" : 150 }'></div>
    
    <div id="elem2" data-plugin-options='{"tabledata": [{"ratetype" : "Selbst", "open" : 30, "inprogress" : 40, "finished" : 10}, {"ratetype" : "Top-Down", "open" : 10, "inprogress" : 50, "finished" : 60} ,  {"ratetype" : "Neue Ziele", "open" : 5, "inprogress" : 60, "finished" : 10}  ], "defaultcolors" : ["#d9534f", "#f0ad4e", "#5cb85c"], "canvaswidth" : 300, "canvasheight" : 150, "defaultkey" : "ratetype", "showseriesname" : true }'></div>

    <div id="elem3" data-tabledata='{"tabledata": [{"ratetype" : "Selbst", "open" : 30, "inprogress" : 40, "finished" : 10}, {"ratetype" : "Top-Down", "open" : 10, "inprogress" : 50, "finished" : 60} ,  {"ratetype" : "Neue Ziele", "open" : 5, "inprogress" : 60, "finished" : 10}  ]}' data-plugin-options='{ "defaultcolors" : ["#d9534f", "#f0ad4e", "#5cb85c"], "canvaswidth" : 300, "canvasheight" : 150, "defaultkey" : "ratetype", "showseriesname" : true }'></div>

    
    <div id="ctxs111-u-57--paragraph-1190709" name="stackedbarchartcontainer" class="stackedbarchartcontainer"><div class="series-data" data-tabledata='{"tabledata" : [{"ratetype":"Self","Offen":6,"In Arbeit":4,"Abgeschlossen":0},{"ratetype":"Top-Down","Offen":6,"In Arbeit":4,"Abgeschlossen":0}]}'></div></div>    
   
        
    <script type="text/javascript">
 //     $('#elem').fancyrates();
   //   $('#elem2').fancyrates();
     // $('#elem3').fancyrates();
      $('.stackedbarchartcontainer div').fancyrates({ "defaultcolors" : ["#d9534f", "#f0ad4e", "#5cb85c"], "canvaswidth" : 300, "canvasheight" : 150, "defaultkey" : "ratetype", "showseriesname" : true });


    </script>

  </body>
</html>